<template>
  <div class="contentShadow">
    <el-container>
      <el-header style="margin-bottom: 30px">
        <h1>个人学年总结表</h1>
        <el-tag>学号：{{ summary.studentId }}</el-tag>
      </el-header>
      <el-main>
        <el-form ref="form" :model="summary" :rules="rules" :inline="false">
          <!--            <el-form-item label="所属学年" prop="schoolYear">-->
          <!--                <el-input v-model="summary.schoolYear" disabled="disabled"></el-input>-->
          <!--            </el-form-item>-->
          <el-form-item label="个人总结内容（不超过1000字）" prop="summary">
            <el-input type=textarea :autosize="{minRows: 12, maxRows: 12}" v-model="summary.summary"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm" :loading="loading">提交</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import {getStudentInfo, getSummary, addSummary} from "@/api/student";

export default {
  name: "Summary",
  data() {
    return {
      summary: {
        studentId: "",
        // schoolYear: "2022",
        summary: ""
      },
      rules: {
        studentId: [{required: true, message: "请输入学号", trigger: "blur"}],
        // schoolYear: [{required: true, message: "请选择学年", trigger: "blur"}],
        summary: [{required: true, message: "请输入个人总结，不超过1000字", trigger: "blur"}],
      },
      loading: false,
    };
  },
  mounted() {
    getStudentInfo().then((res) => {
      this.summary.studentId = res.data.studentId;
    });
    getSummary().then((res) => {
      this.summary.summary = res.data;
    })
  },
  methods: {
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          // TODO: send user data to backend
          this.loading = true;
          const para = {
            summary: this.summary.summary
          }
          console.log(para)
          addSummary(para).then(res => {
            if (res.code === 50003) {
              this.$message.error(res.msg)
            } else {
              this.$message.success(res.msg)
            }
            this.loading = false
          })
        } else {
          console.log("请按正确格式填写表单");
        }
      });
    },
    resetForm() {
      this.$refs.form.resetFields();
    },
  },
};
</script>

<style>

</style>
